<template>
  <view class="content" v-if="!$_.isEmpty(detail)">
    <view class="title_box" style="margin-left: 20rpx">
      <view class="title_line"></view>
      <view style="color: #fff">基础信息</view>
    </view>
    <view class="tips-box" style="margin-left: 20rpx">
      <view class="name_list">
        <name_box
          style="margin-right: 20rpx"
          v-for="(item, i) in detail.ziDes"
          :key="i"
          :text="item.jtz"
        ></name_box>
        <view class="pinYin">
          <view class="box_title">拼音</view>
          <view v-for="(item, i) in detail.ziDes" :key="i" class="box_item">{{
            item.py
          }}</view>
        </view>
        <view class="pinYin">
          <view class="box_title">繁体</view>
          <view v-for="(item, i) in detail.ziDes" :key="i" class="box_item">{{
            item.zi
          }}</view>
        </view>
        <view class="pinYin">
          <view class="box_title">笔画</view>
          <view class="box_item" v-for="(item, i) in detail.ziDes" :key="i">{{
            item.bihua
          }}</view>
        </view>
        <view class="pinYin">
          <view class="box_title">五行</view>
          <view class="box_item" v-for="(item, i) in detail.ziDes" :key="i">{{
            item.wx
          }}</view>
        </view>
      </view>
    </view>

    <view
      class="tips-box"
      style="padding-top: 0; padding-bottom: 100rpx; margin-left: 20rpx"
    >
      <view class="title_box" style="padding-left: ">
        <view class="title_line"></view>
        <view style="font-size: 44rpx">五格信息</view>
      </view>
      <view class="wuge_list" style="padding-top: 80rpx">
        <view
          style="
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <view class="outge">
            <view>外格</view>
            <view
              >{{ detail.outge }}
              <text
                :style="{
                  color: getColorImg(detail.outgewx).color,
                  'margin-left': ' 8rpx',
                }"
              >
                {{ detail.outgewx }}
              </text>
              <img
                style="width: 30rpx; height: 20rpx; margin-left: 4rpx"
                :src="getColorImg(detail.outgewx).img"
                alt=""
              />
            </view>
          </view>
        </view>
        <view style="position: relative">
          <img
            class="bottom_line"
            src="../../static/images/name/img-bottomLine.png"
            alt=""
          />

          <view class="item_detail" style="margin-top: 20rpx">
            <name_box
              v-if="detail.firstname.length !== 3"
              style="margin-bottom: 20rpx"
              :text="''"
            ></name_box>

            <view class="xing_box" style="display: flex">
              <name_box
                v-for="(item, i) in detail.xingList"
                :key="i"
                :text="item.zi"
                v-if="item.zi"
                :style="{ marginRight: i == 1 ? '0' : '10rpx' }"
              >
              </name_box>
              <view
                class="item_wuxing"
                :style="{
                  top: detail.firstname.length == 3 ? '8rpx' : '-112rpx',
                  left: detail.firstname.length == 3 ? '196rpx' : '230rpx',
                }"
              >
                <view class="ge_item">天格</view>
                <view class="ge_item"
                  >{{ detail.tiange }}
                  <text
                    :style="{
                      color: getColorImg(detail.tiangewx).color,
                      'margin-left': ' 8rpx',
                    }"
                  >
                    {{ detail.tiangewx }}
                  </text>
                  <img
                    style="
                      width: 30rpx;
                      height: 20rpx;
                      margin-left: 4rpx;
                      transform: rotate(0deg);
                    "
                    :src="getColorImg(detail.tiangewx).img"
                    alt=""
                  />
                </view>
                <img src="../../static/images/name/img_topLine.png" alt="" />
              </view>
            </view>

            <view
              v-for="(child, l) in detail.mingList"
              :key="l"
              style="position: relative"
            >
              <name_box style="margin-top: 20rpx" :text="child.zi"></name_box>
              <view
                class="item_wuxing"
                :class="
                  detail.firstname.length !== 3
                    ? 'item_wuxing' + l
                    : 'item_wuxing' + l + 'san'
                "
                v-if="l < 2"
              >
                <view class="ge_item">{{ l == 0 ? "人格" : "地格" }}</view>
                <view class="ge_item"
                  >{{ l == 0 ? detail.renge : detail.dige }}
                  <text
                    :style="{
                      color: getColorImg(l == 0 ? detail.rengewx : detail.digewx).color,
                      'margin-left': ' 8rpx',
                    }"
                  >
                    {{ l == 0 ? detail.rengewx : detail.digewx }}
                  </text>
                  <img
                    style="
                      width: 30rpx;
                      height: 20rpx;
                      margin-left: 4rpx;
                      transform: rotate(0deg);
                    "
                    :src="getColorImg(l == 0 ? detail.rengewx : detail.digewx).img"
                    alt=""
                  />
                </view>
                <img src="../../static/images/name/img_topLine.png" alt="" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="item_bottom">
        <text style="font-weight: 200">总格：</text>
        <text style="font-weight: bold; margin-left: 8rpx; font-size: 72rpx">{{
          detail.totalgedes.num
        }}</text>
        <view
          class="bottom_shuxing"
          :style="{
            color: getColorImg(detail.totalgewx).color,
            'margin-left': ' 8rpx',
          }"
          >{{ detail.totalgewx }}</view
        >
      </view>
    </view>
    <activity-box :positionId="602"></activity-box>
    <view class="name_analysis" style="padding-bottom: 100rpx">
      <view
        class="title_box"
        style="padding-bottom: 60rpx; justify-content: space-between; align-items: center"
      >
        <view style="display: flex">
          <view class="title_line"></view>
          <view style="font-size: 60rpx; color: #fff">姓名解析</view></view
        >
        <img
          style="width: 64rpx; height: 64rpx; padding-right: 30rpx"
          src="../../static/images/name/img-ji.png"
          alt=""
        />
      </view>

      <view class="name_num">
        <img class="img_bagua" src="../../static/images/name/bgc-bagua.png" alt="" />
        <view class="num_left">
          <view class="num_title">姓名得分</view>
          <view class="num_dec"> *打分仅作参考</view>
        </view>
        <view class="num_right">
          <view style="font-size: 120rpx; font-weight: bold">{{ detail.nameScore }}</view>
          <view style="font-size: 48rpx; margin-top: 16rpx; margin-left: 8rpx"> 分</view>
        </view>
      </view>

      <view
        class="tips-box"
        style="padding-top: 0; padding-bottom: 100rpx; margin-left: 20rpx"
      >
        <view class="title_box" style="padding-left: ">
          <view class="title_line"></view>
          <view style="font-size: 44rpx">姓名总格</view>
        </view>
        <view class="name_explain" v-html="detail.totalgedes.als"> </view>
        <view class="name_explain" v-html="detail.totalgedes.content"> </view>
        <view class="name_explain" v-html="detail.totalgedes.yy"> </view>
      </view>
    </view>
    <activity-box :positionId="603"></activity-box>
  </view>
</template>

<script>
import Name_box from "./components/name_box.vue";
import { getNameInfo } from "@/http/api.js";
export default {
  components: {
    name_box: Name_box,
  },
  data() {
    return {
      info: {},
      detail: {},
      width: 276,
    };
  },

  computed: {
    getColorImg() {
      return function (wx) {
        if (wx == "木") {
          return {
            img: "../../static/images/bazi/fortune/wood.png",
            color: "#4D9B5F",
          };
        }
        if (wx == "火") {
          return {
            img: "../../static/images/bazi/fortune/fire.png",
            color: "#E45B5B",
          };
        }
        if (wx == "土") {
          return {
            img: "../../static/images/bazi/fortune/earth.png",
            color: "#D9A05B",
          };
        }
        if (wx == "金") {
          return {
            img: "../../static/images/bazi/fortune/metal.png",
            color: "#D9A05B",
          };
        }
        if (wx == "水") {
          return {
            img: "../../static/images/bazi/fortune/water.png",
            color: "#4D9B5F",
          };
        }
      };
    },
  },
  methods: {
    getNameDetail() {
      wx.showLoading();
      let obj = {
        birthday: "1996-12-12 00:00:00",
        firstname: this.info.lastName,
        lastname: this.info.firstName,
        sex: 1,
        type: this.info.type
      };
      getNameInfo({ ...obj }).then((res) => {
        const { data, code } = res;
        if (code == 200) {
          let obj = { bihua: "", wx: "", zi: "", py: "" };
          let list = this.$_.cloneDeep(data.ziDes);
          data.xingList = list.splice(0, data.lastname.length);
          data.mingList = list;

          if (data.firstname.length == 1) {
            data.mingList.push(obj);
          }
          if (data.lastname.length == 1) {
            //姓为复姓时
            data.xingList.unshift(obj);
          } else {
            this.width = 170;
          }

          if (data.firstname.length == 1) {
            data.ziDes.push(obj);
          }
          if (data.lastname.length == 1 && data.firstname.length < 3) {
            //姓为复姓时
            data.ziDes.unshift(obj);
          }

          this.detail = data;

          wx.hideLoading();
        } else {
          wx.showToast({
            title: "获取信息失败",
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
  },
  mounted() {
    this.getNameDetail();
  },
  onLoad(v) {
    this.info = JSON.parse(v.info);
  },
};
</script>

<style lang="scss">
.content {
  height: 100%;
  width: 100%;
  //   padding: 0 20rpx;
  background: linear-gradient(180deg, #a88e71 0%, rgba(255, 250, 241, 0) 98%);
}
.tips-box {
  width: calc(100% - 40rpx);
  background: #fff;
  
  padding: 40rpx 0;
  margin-top: 40rpx;
}

.title_box {
  padding-top: 40rpx;
  display: flex;
  font-size: 60rpx;
  color: #492310;
}
.title_line {
  width: 14rpx;
  height: 46rpx;
  background: #492310;
  margin-right: 12rpx;
}

.name_item {
  width: 120rpx;
  height: 120rpx;
  opacity: 1;
  border: 1px solid #492310;
  font-size: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3d3d3d;
}
.name_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.pinYin {
  width: 100%;
  margin-top: 40rpx;
  background: #f6f6f6;
  height: 74rpx;
  display: flex;
  justify-content: start;
  align-items: center;
}
.box_title {
  font-size: 30rpx;
  font-weight: bold;
  margin: 0 64rpx 0 88rpx;
  color: #3d3d3d;
}
.box_item {
  font-size: 28rpx;
  font-weight: bold;
  color: #3d3d3d;
  width: 88rpx;
  margin-left: 12rpx;
}

.item_detail {
  position: relative;
  margin-right: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item_wuxing {
  position: absolute;
  text-align: center;
  top: -112rpx;
  left: 230rpx;

  img {
    transform: rotate(90deg);
    margin-top: 8rpx;
    width: 130rpx;
    height: 42rpx;
  }
}
.item_bottom {
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dccdbe;
  font-size: 48rpx;
  padding: 40rpx 0;
  background-image: url("../../static/images/name/bgc-taiji.png");
  background-size: contain 100%;
  background-position: 105%;
  background-repeat: no-repeat;
}
.bottom_shuxing {
  background: white;
  border-radius: 4rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rpx 8rpx;
  margin-left: 4rpx;
}
.name_analysis {
  background: linear-gradient(180deg, #a88e71 0%, rgba(255, 250, 241, 0) 98%);
  width: calc(100% - 40rpx);
  margin-left: 20rpx;
}
.num_left {
  margin-left: 20rpx;
  color: #3d3d3d;
}
.num_right {
  display: flex;
  color: #3d3d3d;
  padding-right: 100rpx;
}
.num_title {
  font-size: 44rpx;

  color: #492310;
}
.num_dec {
  color: #3d3d3d;
  font-size: 20rpx;
  margin-top: 10rpx;
}
.name_num {
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 80rpx 0 40rpx 0;
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
  overflow: hidden;
  
}
.img_bagua {
  position: absolute;
  left: 310rpx;
  top: -180rpx;
  width: 640rpx;
  height: 600rpx;
  transform: rotate(42);
  opacity: 1;
  scale: 1.3;
}
.name_explain {
  padding: 0 20rpx;
  font-size: 28rpx;
  margin-top: 28rpx;

  color: #000000;
  margin-bottom: 40rpx;
}
.outge {
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: inline-block;
  display: flex;
  align-items: center;
  margin-right: 80rpx;
}

.wuge_list {
  display: flex;
  justify-content: start;
  padding-left: 12%;
  padding-bottom: 30rpx;
}
.ge_item {
  transform: translate(90rpx, 64rpx);
}
.bottom_line {
  transform: rotate(90deg);
  position: absolute;
  top: 290rpx;
  right: 120rpx;
}

.xing_box {
  display: flex;
  position: relative;
  width: 276rpx;
  justify-content: center;
}

.item_wuxing0 {
  top: -70rpx;
  left: 80rpx;
  width: 276rpx;
}
.item_wuxing1 {
  top: -70rpx;
  left: 80rpx;
  width: 276rpx;
}
.item_wuxing0san {
  top: 40rpx;
  left: 118rpx;
}
.item_wuxing1san {
  top: 60rpx;
  left: 118rpx;
}
</style>
